<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  
  
  <title>  Vue过渡与动画 |   写夜子的个人博客 </title>

 
  
    <link rel="icon" href="/images/favicon.png">
  


  <link rel="stylesheet" href="/nayo.min.css"> 
</head>  
  <body>   
    
      <header class="header">
	
  <nav class="header-nav">        
   
    <span class="iconfont icon-menu mobile-toggle"></span>   	

    <div class="header-menu">          
              
            
              <a class="header-menu-link" id="header-menu-home" href="/">首页</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-archives" href="/archives">归档</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-tags" href="/tags">标签</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-about" href="/about">关于</a>     
            
            
            
              <a class="iconfont icon-menu-search header-menu-link" id="header-menu-search"></a>
            
                
    </div>  
    
  </nav>
</header>   

      <div class="container">       
          
          
            <section class="main">  
          

          <article class="post">
  
	<div class="post-header">

	<p class="post-title">	
		Vue过渡与动画
	</p>
			

	<div class="meta-info">	
	<span>
		8月 22, 2018
	</span>

	
	
		<i class="iconfont icon-words"></i>
		<span>
			2900
		</span>
	
</div>

</div> 
	 

	  <div class="post-content slideDownMin">

		

			
					<h3 id="过渡"><a href="#过渡" class="headerlink" title="过渡"></a>过渡</h3><p>  Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.<br>  包括以下工具：</p>
<ul>
<li>在 CSS 过渡和动画中自动应用 class</li>
<li>可以配合使用第三方 CSS 动画库，如 Animate.css<a id="more"></a></li>
<li>在过渡钩子函数中使用 JavaScript 直接操作 DOM</li>
<li>可以配合使用第三方 JavaScript 动画库，如 Velocity.js    </li>
</ul>
<p>  注： 后面两种工具涉及到太多js的操作，一般来说很消耗内存，故不太多使用.    </p>
<h3 id="单元素-组件的过渡"><a href="#单元素-组件的过渡" class="headerlink" title="单元素/组件的过渡"></a>单元素/组件的过渡</h3><p>  Vue封装了transition的封装组件,可以为任何元素和组件添加进入/离开过渡</p>
<ul>
<li>条件渲染(v-if)</li>
<li>条件展示(v-show)</li>
<li>动态组件</li>
<li>组件根节点     </li>
</ul>
<p>  使用方法：<br>  template部分：<br>  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">lang</span>=<span class="string">"html"</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">name</span>=<span class="string">"button"</span> <span class="attr">v-on:click</span>=<span class="string">"showHide"</span>&gt;</span>过渡<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"fade"</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">"show"</span>&gt;</span>哈哈<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>  script部分：<br>  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    name:<span class="string">"anim"</span>,</span><br><span class="line">    data()&#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        show:<span class="literal">true</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">      showHide()&#123;</span><br><span class="line">        <span class="keyword">this</span>.show=!<span class="keyword">this</span>.show;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>  style部分：<br>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.fade-enter</span>&#123;</span><br><span class="line"><span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-enter-active</span>&#123;</span><br><span class="line">  <span class="attribute">transition</span>: opacity .<span class="number">5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-enter-to</span>&#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-leave-enter</span>&#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-leave-active</span>&#123;</span><br><span class="line">  <span class="attribute">transition</span>: opacity .<span class="number">5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-leave-to</span>&#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>  总结：将元素放置在transition标签下,为transition标签赋值一个name属性,然后在样式表里面实现动画.<br>  形如：<br>  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;transition name=<span class="string">"my transition"</span>&gt;</span><br></pre></td></tr></table></figure></p>
<h3 id="过渡的类名"><a href="#过渡的类名" class="headerlink" title="过渡的类名"></a>过渡的类名</h3><p>  当插入或删除包含在 transition 组件中的元素时,Vue 将会自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名.<br>  在进入/离开的过渡中,有6个class切换：</p>
<ul>
<li>v-enter:定义进入过渡的开始状态</li>
<li>v-enter-active:执行过程中</li>
<li>v-enter-to:结束动画</li>
<li>v-leave:定义离开过渡的开始状态</li>
<li>v-leave-active:离开过程</li>
<li>v-leave-to:离开结束     </li>
</ul>
<p>  <img src="http://wx4.sinaimg.cn/mw690/89296167gy1fujeqr2duhj20xc0godfv.jpg" alt="过渡" title="过渡"></p>
<p>  过渡总共有6个状态,进入有3个,退出有3个.<br>  在使用时6个都应使用,形如：<br>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.fade-enter</span>&#123;</span><br><span class="line"><span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-enter-active</span>&#123;</span><br><span class="line">  <span class="attribute">transition</span>: opacity .<span class="number">5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-enter-to</span>&#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-leave-enter</span>&#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-leave-active</span>&#123;</span><br><span class="line">  <span class="attribute">transition</span>: opacity .<span class="number">5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.fade-leave-to</span>&#123;</span><br><span class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="css动画"><a href="#css动画" class="headerlink" title="css动画"></a>css动画</h3><p>  CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。<br>  在使用动画时,通常只需要控制enter-active和leave-active两个过程即可.<br>  例如：<br>  template部分：<br>  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span> <span class="attr">lang</span>=<span class="string">"html"</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">""</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">name</span>=<span class="string">"button"</span> <span class="attr">v-on:click</span>=<span class="string">"showHideAnim"</span>&gt;</span>动画<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"hello"</span>&gt;</span></span><br><span class="line">       <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">"showAnim"</span>&gt;</span>嘿嘿<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">     <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>  script部分：<br>  <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    name:<span class="string">"anim"</span>,</span><br><span class="line">    data()&#123;</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        show:<span class="literal">true</span></span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">      showHideAnim()&#123;</span><br><span class="line">        <span class="keyword">this</span>.showAnim=!<span class="keyword">this</span>.showAnim;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>  style部分：<br>  <figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.hello-enter-active</span>&#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">1s</span> ease;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.hello-leave-active</span>&#123;</span><br><span class="line">  <span class="attribute">animation</span>: bounce-in <span class="number">1s</span> ease reverse;</span><br><span class="line">&#125;</span><br><span class="line">@<span class="keyword">keyframes</span> bounce-in &#123;</span><br><span class="line">  0% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(0);</span><br><span class="line">  &#125;</span><br><span class="line">  50% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(1.5);</span><br><span class="line">  &#125;</span><br><span class="line">  100% &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(1);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="引入第三方css动画库"><a href="#引入第三方css动画库" class="headerlink" title="引入第三方css动画库"></a>引入第三方css动画库</h3><p>  可以在index.html引入外部css动画库,如<a href="https://daneden.github.io/animate.css/" target="_blank" rel="noopener">Animate</a>.<br>  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://cdn.jsdelivr.net/npm/animate.css@3.5.1"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<p>  然后在组件中可以直接使用：<br>  <figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">"custom-classes-transition"</span> <span class="attr">enter-active-class</span>=<span class="string">"animated tada"</span> <span class="attr">leave-active-class</span>=<span class="string">"animated bounceOutRight"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-show</span>=<span class="string">"libs"</span>&gt;</span>呵呵<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
  	
					
	  </div>     
	  

	
<div class="post-meta">
      	

      
        <i class="iconfont icon-tag"></i>     
          <a class="tag-link" href="/tags/JS/">JS</a> <a class="tag-link" href="/tags/Vue/">Vue</a>    
      	
</div>





<div class="post-footer">
  <div class="pf-left">
      <img class="pf-avatar" src="http://wx2.sinaimg.cn/mw690/89296167gy1fu5ph67x17j21kw1kwhdu.jpg">
      <p class="pf-des">hi,我是写夜子,希望你有愉快的一天.</p>
  </div>

  <div class="pf-right">           
      <div class="pf-links">
        




<span class="donate-btn">
	<span class="iconfont icon-donate"></span>
</span>


<div id="donate-box" class="sildeUpMin">

	<span class="donate-cancel iconfont icon-cancel"></span>

	<div class="donate-img-box">
		<img id="donate-qr-wechat" class="noLazyLoad donate-img" src="/images/donate1.png" alt="No Donate Image!">	
		<img id="donate-qr-alipay" class="noLazyLoad donate-img" src="/images/donate2.png" alt="No Donate Image!">	
	</div>

	<span class="donate-word">世界美好 你也是</span>

	<div class="donate-list">
		<span class="iconfont icon-donate-wechat"></span>
		<span class="iconfont icon-donate-alipay"></span>
	</div>

</div>

 
        
	
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=21d601593a1de"></script>
	
	<span class="share-btn">
	<span class="iconfont icon-share"></span>
	</span>


	<div class="-mob-share sildeUpMin">
		   			             
            <a class="iconfont  icon-share-qq -mob-share-qq"></a>		
     	   			             
            <a class="iconfont  icon-share-weixin -mob-share-weixin"></a>		
     	   			             
            <a class="iconfont  icon-share-weibo -mob-share-weibo"></a>		
     	   			             
            <a class="iconfont  icon-share-douban -mob-share-douban"></a>		
     	   			             
            <a class="iconfont  icon-share-facebook -mob-share-facebook"></a>		
     	   			             
            <a class="iconfont  icon-share-twitter -mob-share-twitter"></a>		
     	   			             
            <a class="iconfont  icon-share-google -mob-share-google"></a>		
     	   
	</div>	

      </div>  
    <nav class="pf-paginator">
      
         
          <a href="/2018/08/24/Mac安装Vue.js devtools插件无法使用的解决方法/" data-hover="Mac安装Vue.js devtools插件无法使用的解决方法">上一篇</a>      
            
        
      
        
        <a href="/2018/08/14/Vue插槽与缓存/" data-hover="Vue插槽与缓存"> 下一篇</a>
            
  </nav>   
  </div>
</div> 
	
	
</article>

          </section> 
      </div>            
    
    <a id="backTop">
      <span>
        <i class="iconfont icon-backtotop"></i>
      </span>
    </a> 

  
    
    <div class="search-container sildeUpMin">
        <div class="search-header">
            <input type="text" placeholder="输入你想搜索的" id="search-input" class="search-input">  
            <span class="search-cancel iconfont icon-cancel"></span>
        </div>
        <div id="search-result" class="search-result"></div>
    </div>
 
     <div class="mobile-menu">      

      
      <img class="mobile-menu-icon" src="/images/favicon.png">   
      

         
            

            <a class="mobile-menu-link" href="/">首页
            </a>
            
         
            

            <a class="mobile-menu-link" href="/archives">归档
            </a>
            
         
            

            <a class="mobile-menu-link" href="/tags">标签
            </a>
            
         
            

            <a class="mobile-menu-link" href="/about">关于
            </a>
            
         
                          

            <a class="mobile-menu-link mobile-menu-search" href="#">搜索 </a>                 
            
         
      
</div>        
    


<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?636802045446222199ae541e32c8133e"; 
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>





     
    




<footer id="footer">


		<div class="footer-copyright">
		&copy;
		
		2018-
		
		2020

		Xieyezi
		<br>

		Copyright
		<a href="https://github.com/xieyezi" target="_blank">Xieyezi</a>
		</div>

</footer>
   

  

    <script src="/nayo.bundle.js"></script>           
  </body>        
</html>